<template>
  <div class="sign" v-show="show" >
      <canvas class="canvas" width="400" height="400"></canvas>
      <div class="foot">
          <el-button type="warning" @click="reset">重 签</el-button>
          <el-button type="success" @click="submit">确 定</el-button>
          <el-button type="primary" @click="cansel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { onMounted, ref,getCurrentInstance } from 'vue'
export default {

   setup(){
       let {ctx} =getCurrentInstance()
       onMounted(()=>{
           sign()
           ctx.$bus.off()
           ctx.$bus.on('getshow',()=>{
               show.value=true
           })
       })
       let show=ref(false)

       function sign(){
           let canvas=document.querySelector('.canvas')
           let ctx=canvas.getContext('2d')
           ctx.save()
           ctx.fillStyle='#fff'
           ctx.fillRect(0,0,canvas.width,canvas.height)
           ctx.restore()
           canvas.addEventListener('mousedown',()=>{
               ctx.strokeStyle='#000'
               ctx.lineWidth=5
               ctx.lineCap='round'
               ctx.beginPath()
               canvas.addEventListener('mousemove',draw)
           })
           canvas.addEventListener('mouseup',()=>{
               canvas.removeEventListener('mousemove',draw)
           })
           canvas.addEventListener('mouseout',()=>{
               canvas.removeEventListener('mousemove',draw)
           })

           function draw(e){
               let x=e.offsetX
               let y =e.offsetY
               
               ctx.lineTo(x,y)
               ctx.stroke()
           }
       }
       let submit=()=>{
           show.value=false
           let canvas=document.querySelector('.canvas')
           let url=canvas.toDataURL('image/jpeg')
           ctx.$bus.emit('sign',url)
           reset()
       }
       let reset=()=>{
           let canvas=document.querySelector('.canvas')
           let ctx=canvas.getContext('2d')
           ctx.save()
           ctx.clearRect(0,0,canvas.width,canvas.height)
           ctx.fillStyle='#fff'
           ctx.fillRect(0,0,canvas.width,canvas.height)
           ctx.restore()
       }
       let cansel=()=>{
           show.value=false
       }
       return {
           show,submit,reset,cansel
       }
   }
}
</script>

<style lang="less" scoped>

  .sign{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.5);
      z-index: 99;
      .canvas{
          position: absolute;
          top: 10%;
          left: 30%;
          background: blanchedalmond;
          border: 1px solid black;
      }
      .foot{
        position: absolute;
        left: 30%;
        bottom:20px ;
         width: 500px;
         height: 100px;
         margin: 20px auto;
         display: flex;
         justify-content: flex-end;
         .el-button{
             width: 100px;
             height: 40px;
             line-height: 40px;
             padding: 0 10px;
             font-size: 16px;
         }
      }
  }
</style>